<!--
 * @Descripttion: 
 * @version: 
 * @Author: kk
 * @Date: 2020-10-26 19:25:04
 * @LastEditors: kk
 * @LastEditTime: 2020-10-27 11:49:11
-->
<!--  -->
<template>
 <div>
    <Header></Header>
    <h2 v-if="is_show" class="Center">暂无订单信息</h2>
    <!-- for循环 -->
    <el-card class="box-card Center" shadow='hover'  v-for="order in orders"
          :key="order.id" >       
      <div
        slot="header"
        class="clearfix"
      >
        <span>已付款订单</span>
      </div>
      <div>
        {{'id: ' +  order.id}}
      </div>
      <div>
        {{'用户id: ' +  order.userId}}
      </div>
      <div>
        {{'秒杀id: ' +  order.killId}}
      </div>
      <div>
        {{'商品id: ' +  order.itemId}}
      </div>
      <div>
        {{'status: ' +  order.status}}
      </div>
      <div>
        {{'支付状态: ' +  '已支付'}}
      </div>
    </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Header from "@/components/Header";
import pay from "@/api/miaosha";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Header,
  },
data() {
//这里存放数据
return {
  userId: '',
  orders: [],
  is_show: true,
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  getOrders(userId){
    pay.getPayedOrder(userId).then(response=>{
            console.log(response.data.orders)
            this.orders=response.data.orders
            if(response.code==200){
                 this.is_show=false
            }else{
                this.is_show=true
            }
        }).catch(error=>{

        })
  }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.userId = this.$store.getters.getUser.id;
    if(this.userId){
        this.getOrders(this.userId);
    }
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.Center {
  margin: 20px auto;
  text-align: center;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>